<template>
	<view class="play-container" :style="{ left: config.x + 'px', top: config.y + 'px', width: config.width + 'px', height: config.height + 'px' }">
		<live-player
			:id="'yunxinplayer-' + uid"
			:src="url"
			mode="RTC"
			class="player"
			:orientation="orientation"
			min-cache="0.2"
			max-cache="0.8"
			bindstatechange="stateChangeHandler"
			:object-fit="objectFit"
			autoplay
			:style="'height:' + config.height + 'px; position: absolute; width: 100%; top: 0; left: 0;background-color: transparent;'"
			:debug="debug"
		>
			<slot />
			<cover-view v-if="status !== 'ready'" class="sud flex-center-column" style="display:none;">
				<!-- style="position: absolute; width: 100%; height:100%;display:flex;justify-content:center;align-items:center;"> -->
				<cover-image style="width: 182rpx;height:240rpx" :src="'../../images/yunxin/' + status + '.png'"></cover-image>
			</cover-view>
			<cover-view style="position: absolute;top:10px;left:10px;font-size: 28rpx; right: 10px;color:#ccc;" v-if="coverText.length != 0">{{ coverText }}</cover-view>
		</live-player>
	</view>
</template>

<script>
export default {
	props: {
		config: {
			type: Object,
			default() {
				return {
					x: 0,
					y: 0,
					width: 0,
					height: 0
				};
			}
		},
		debug: {
			type: Boolean,
			default: false
		},
		/**
		 * 加载状态：loading、ready、error
		 */
		status: {
			type: String,
			default: 'loading',
			observer: function(newVal, oldVal, changedPath) {
				console.log(`player status changed from ${oldVal} to ${newVal}`);
			}
		},
		/**
		 * 画面方向，可选值有 vertical，horizontal
		 */
		orientation: {
			type: String,
			default: 'vertical'
		},
		objectFit: {
			type: String,
			default: 'fillCrop'
		},
		name: {
			type: String,
			default: ''
		},
		uid: {
			type: String,
			default: ''
		},
		coverText: {
			type: String,
			default: ''
		},
		url: {
			type: String,
			default: '',
			observer: function(newVal, oldVal, changedPath) {}
		}
	},
	data() {
		return {
			livePlayerContext: null,
			detached: false
		};
	},
	onLoad(option) {
		
	},
	
	mounted(){
		this.ready()
	},
	destroyed(){
		this.detached()
	},
	onShow() {},
	onHide() {},
	onUnload() {},
	methods: {
		/**
		 * 组件生命周期：在组件布局完成后执行，此时可以获取节点信息
		 */
		ready() {
			console.log(`yunxinplayer-${this.data.uid} ready`);
			if (this.data.livePlayerContext) {
				this.data.livePlayerContext = uni.createLivePlayerContext(`yunxinplayer-${this.data.uid}`, this);
			}
			if (this.data.url) {
				this.start();
			}
		},
		/**
		 * 组件生命周期：在组件实例被从页面节点树移除时执行
		 */
		detached() {
			console.log(`yunxinplayer-${this.data.uid} detached`);
			uni.createLivePlayerContext(`yunxinplayer-${this.data.uid}`, this).stop();
			this.data.detached = true;
		},

		/**
		 * 开始拉流播放
		 */
		start() {
			const uid = this.data.uid;
			if (this.data.status === 'ready') {
				console.log(`player ${uid} already started`);
				return;
			}
			if (this.data.detached) {
				console.log(`try to start player while component already detached`);
				return;
			}
			console.log(`starting player ${uid}`);
			this.data.livePlayerContext.play();
		},
		/**
		 * 停止拉流播放
		 */
		stop() {
			console.log(`stopping player ${this.data.uid}`);
			uni.createLivePlayerContext(`yunxinplayer-${this.data.uid}`, this).stop();
		},
		/**
		 * 切换画面方向
		 * true为 horizontal，false为 vertical
		 */
		changeOrientation(isHorizontal) {
			let orientation = isHorizontal ? 'horizontal' : 'vertical';

			this.orientation = orientation;
		},
		/**
		 * 切换填充模式
		 * true为 fillCrop，false为 contain
		 */
		changeObjectFit(isFillCrop) {
			let objectFit = isFillCrop ? 'fillCrop' : 'contain';

			this.objectFit = objectFit;
		},
		/**
		 * 播放器状态更新回调
		 */
		stateChangeHandler(e) {
			console.warn(`yunxin-player code: ${e.detail.code} - ${e.detail.message}`);
			let uid = parseInt(e.target.id.split('-')[1]);
			if (e.detail.code === 2004) {
				console.log(`live-player ${uid} started playing`);
				if (this.data.status === 'loading') {
					this.status = 'ready';
				}
			} else if (e.detail.code === -2301) {
				console.log(`live-player ${uid} stopped`, 'error');

				this.status = 'error';

				this.triggerEvent('pullfailed');
			}
		},
		/**
		 * 改变画面蒙面
		 */
		changeStatus(status) {
			switch (status) {
				case 'leave':
				case 'notConnected': {
					break;
				}
				default: {
					status = this.data.status;
				}
			}
			// console.error(status)

			this.status = status;
		},
		/**
		 * 开启调试
		 */
		toggleDebug(isDebug) {
			this.debug = isDebug;
		}
	}
};
</script>

<style lang="less">
.play-container {
	background: black;
	display: block;
	position: absolute;
}

.sud {
	background-color: #1b2a38;
	opacity: 0.65;
}
.player {
	z-index: 10;
}
</style>
